<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <div v-show="!collapsed" class="logo" style="text-align: center;padding: 20px">
        <img src="../assets/gbc.jpg" style="width: 140px;margin-bottom: 10px">.
        <span style="font-size: 23px;color: white;">数据分析</span>
      </div>
      <a-menu :selectedKeys="[route.path]" theme="dark" mode="inline">
        <a-menu-item v-for="item in menuList" :key="item.path" @click="clickMenu(item)">
          <pie-chart-outlined />
          <span>{{item.name}}</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0" />
      <a-layout-content style="margin: 20px 16px 0;">
        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
          <router-view />
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import {
  PieChartOutlined,
} from '@ant-design/icons-vue';
import {onMounted, ref} from 'vue';
import {useRoute, useRouter} from "vue-router";
const collapsed = ref(false);

const route = useRoute();
const router = useRouter();
const menuList = [
  {
    name: '按行为（柱状图）',
    path: '/user_behavior_bar'
  },
  {
    name: '按行为（饼图）',
    path: '/user_behavior_pie'
  },
  {
    name: '按日期（堆叠柱状图）',
    path: '/date_stat'
  },
  {
    name: '按时间（堆叠柱状图）',
    path: '/time_stat'
  },
  {
    name: '按星期次数（饼图）',
    path: '/newEnergyChargeWeekPerson'
  },
  {
    name: '按星期充电时间（饼图）',
    path: '/newEnergyChargeWeekChargeTime'
  },
  {
    name: '充电桩汇总',
    path: '/NewEnergyChargeWeek'
  },
]

const clickMenu = (item) => {
  router.push({path: item.path})
}

</script>
<style scoped>
</style>
